<template>
  <div class="editAreaTools">
    <div class="leftMenu">
      <div class="utilWrapper" @click="showEmotionHander" title="发送表情">
        <MehOutlined ref="emotionRef"/>
        <teleport to="#overlayTarget" v-if="showPort">
          <EmotionComponent @selectEmotion="selectEmotion" :fix-pos="fixPos"/>
        </teleport>
      </div>
      <div class="utilWrapper" title="上传文件" @click="openFileDialog">
        <FolderOpenOutlined />
      </div>
      <div class="utilWrapper" title="截屏">
        <ScissorOutlined @click="screenShot"/>
      </div>
      <div class="utilWrapper" title="聊天记录" @click="showChatRecordWin(roomStore.currentChatRoomInfo)">
        <MessageOutlined />
      </div>
    </div>
    <div class="rightMenu">
      <div class="utilWrapper" title="语音通话" @click="showVoiceCallWin({roomInfo: roomStore.currentChatRoomInfo, callType: 'volice'})">
        <PhoneOutlined />
      </div>
      <div class="utilWrapper" title="视频通话" @click="showVoiceCallWin({roomInfo: roomStore.currentChatRoomInfo, callType: 'video'})">
        <VideoCameraOutlined />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  MehOutlined,
  FolderOpenOutlined,
  ScissorOutlined,
  MessageOutlined,
  PhoneOutlined,
  VideoCameraOutlined
} from '@ant-design/icons-vue'
import { onMounted, onUnmounted, reactive, watch, inject } from 'vue'
import { useWindowSize, type WindowSize } from '@/hooks/useWindows'
import { ref, nextTick } from 'vue'
import EmotionComponent from './chat/emotion/EmotionComponent.vue'
import PubSub from 'pubsub-js'
import useRoomStore from '@/stores/roomStore.ts'
import { showVoiceCallWin, showChatRecordWin, openFileDialogHandler } from '@/utils/Electron.ts'
const screenShot = inject('screenShot', ()=> {})

const roomStore = useRoomStore()
const showPort = ref<Boolean>(false)
const fixPos = reactive({
  left: 0,
  top: 0
})
const emotionRef = ref(null)
const { width, height } = useWindowSize()
// 显示表情包
const showEmotionHander = (e: any) => {
  e.stopPropagation()
  const rect = emotionRef.value?.getBoundingClientRect?.()
  fixPos.left = rect.left - (500) / 2 + 9
  fixPos.top = rect.top - 502
  showPort.value = true
}
// 选择表情
const selectEmotion = (data: any) => {
  PubSub.publish('selectEmotion', { data: data })
}
// 打开文件系统
const openFileDialog = () => {
  openFileDialogHandler()
}
// 屏幕宽度发生变化隐藏表情
watch([width, height], (v1, v2) => {
  showPort.value = false
})
onMounted(() => {
  PubSub.subscribe('closeWindowModal', () => {
    showPort.value = false
  })
})
onUnmounted(()=> {
  PubSub.unsubscribe('closeWindowModal')
})
</script>
<style lang="less" scoped>
.editAreaTools {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
    gap: 15px;
  }
  .utilWrapper {
    position: relative;
    &:hover {
        color: #6d6d6d;
    }
    span {
      outline: none;
    }
  }
}
</style>
